{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import datetime %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@datepicker_css'
    '@chosen_css'
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    <div class="col-xs-12 col-sm-12 widget-container-col">
        <!-- #section:custom/widget-box -->
        <div class="widget-box" style="opacity: 1;">
            <div class="widget-header">
                <h5 class="widget-title">报表条件</h5>
                <!-- /section:custom/widget-box.toolbar -->
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <form class="form-horizontal" action="javascript:search()" method="post" id="searchForm">
                        <div class="form-group line">
                            <div class="col-sm-offset-3 col-sm-9 col-md-offset-3 col-md-8">
                                <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(1)">{{ 'Yesterday'|trans }}</button>
                                <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(2)">{{ 'Today'|trans }}</button>
                                <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(3)">{{ 'Last Week'|trans }}</button>
                                <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(4)">{{ 'This Week'|trans }}</button>
                                <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(5)">{{ 'Last Month'|trans }}</button>
                                <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(6)">{{ 'This Month'|trans }}</button>
                                {% if isSpecial != 1 %}
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(7)">{{ 'This Year'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(8)">{{ 'Last Year'|trans }}</button>
                                {% endif %}
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="form-field-1" class="col-sm-3 control-label no-padding-right">
                                {{ 'Report Type'|trans }}
                            </label>
                            <div class="col-sm-9">
                                <label>
                                    <input type="radio" class="ace" id="report_type_daily" name="report_type" checked value="day">
                                    <span class="lbl"> {{ 'Daily Report'|trans }}</span>
                                </label>
                                <label>
                                    <input type="radio" class="ace" id="report_type_monthly" name="report_type" value="month">
                                    <span class="lbl"> {{ 'Monthly Report'|trans }}</span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="start_date" class="col-sm-3 control-label no-padding-right"> {{ 'Date'|trans }} </label>
                            <div class="col-sm-9">
                                <div class="row" style="margin-bottom: 5px">
                                    <div class="col-sm-6">
                                        <input type="text" class="col-sm-12" id="start_date" placeholder="" value="{{ date.startDate }}">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <input type="text" class="col-sm-12" id="end_date" placeholder="" value="{{ date.startDate }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="que_id" class="col-sm-3 control-label no-padding-right"> 号码组 </label>
                            <div class="col-sm-9">
                                <select data-placeholder="请选择号码组" id="pg_id" class="chosen-select tag-input-style" style="width: 410px" multiple>
                                    {% for pg in phoneGroups %}
                                        <option value="{{ pg.id }}">{{ pg.group_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>


                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-9 col-md-offset-4 col-md-8">
                                <button id="search-report" class="btn btn-info btn-sm" type="submit">
                                    <i class="ace-icon fa fa-search bigger-110"></i> {{'Inquiry'|trans }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /section:custom/widget-box -->
    </div>
    <div>
        <form id="theForm" action="{{ path('icsoc_report_phone_group_list') }}" method="post">
            <input type="hidden" id="data" name="data" value="">
        </form>
    </div>
{% endblock %}

{% block javascript %}
    {{ parent() }}
    {% javascripts
    '@datepicker_js'
    '@chosen_js'
    '@gritter_js'
    '@common_js'
    '@bootbox_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="application/javascript">
        $(document).ready(function() {
            var report_type = $("input[name='report_type']:checked").val();
            $('#start_date').datetimepicker();
            $('#end_date').datetimepicker();
            setDatetimepicker(report_type);
            $('.chosen-select').chosen();
        });

        $("input:radio[name='report_type']").change(function() {
            setDatetimepicker($(this).val());
        });

        function search() {
            var $start_date = $('#start_date');
            var $end_date = $('#end_date');

            if (!$start_date.val()) {
                $start_date.parent().parent().addClass('has-error');
                $start_date.focus();
                return;
            }
            if (!$end_date.val()) {
                $end_date.parent().parent().addClass('has-error');
                $end_date.focus();
                return;
            }
            var $data = {};
            $data.report_type = $('input[name=report_type]:checked').val();
            $data.start_date = $start_date.val();
            $data.end_date = $end_date.val();
            var $pgid = $('#pg_id').val() || [];
            $data.pg_id = $pgid.join(',');

            $('#data').val(jsonToString($data));
            $('#theForm').submit();
        }


        function setDatetimepicker(type)
        {
            $('#start_date').data("DateTimePicker").destroy();
            $('#end_date').data("DateTimePicker").destroy();

            if (type == 'month') {

                $('#start_date').datetimepicker({
                    format: 'YYYY-MM',
                    locale: 'zh-cn'
                }).val('{{ date.startMonth }}');
                $('#end_date').datetimepicker({
                    format: 'YYYY-MM',
                    locale: 'zh-cn'
                }).val('{{ date.endMonth }}');
            } else {
                $('#start_date').datetimepicker({
                    format: 'YYYY-MM-DD',
                    locale: 'zh-cn'
                }).val('{{ date.startDate }}');
                $('#end_date').datetimepicker({
                    format: 'YYYY-MM-DD',
                    locale: 'zh-cn'
                }).val('{{ date.endDate }}');
            }
        }

        /**
         * 设置时间
         *
         * @param type
         */
        function fnSetTime(type)
        {
            var $start_time = $('#start_date');
            var $end_time = $('#end_date');
            var report_type = $("input[name='report_type']:checked").val();
            if (report_type == 'month') {
                switch (type) {
                    case 1:
                        $start_time.val('{{ date.month.yestoday.start }}');
                        $end_time.val('{{ date.month.yestoday.end }}');
                        break;
                    case 2:
                        $start_time.val('{{ date.month.today.start }}');
                        $end_time.val('{{ date.month.today.end }}');
                        break;
                    case 3:
                        $start_time.val('{{ date.month.lastweek.start }}');
                        $end_time.val('{{ date.month.lastweek.end }}');
                        break;
                    case 4:
                        $start_time.val('{{ date.month.thisweek.start }}');
                        $end_time.val('{{ date.month.thisweek.end }}');
                        break;
                    case 5:
                        $start_time.val('{{ date.month.lastmonth.start }}');
                        $end_time.val('{{ date.month.lastmonth.end }}');
                        break;
                    case 6:
                        $start_time.val('{{ date.month.thismonth.start }}');
                        $end_time.val('{{ date.month.thismonth.end }}');
                        break;
                    case 7:
                        $start_time.val('{{ date.month.thisyear.start }}');
                        $end_time.val('{{ date.month.thisyear.end }}');
                        break;
                    case 8:
                        $start_time.val('{{ date.month.lastyear.start }}');
                        $end_time.val('{{ date.month.lastyear.end }}');
                        break;
                }
            } else {
                switch (type) {
                    case 1:
                        $start_time.val('{{ date.day.yestoday.start }}');
                        $end_time.val('{{ date.day.yestoday.end }}');
                        break;
                    case 2:
                        $start_time.val('{{ date.day.today.start }}');
                        $end_time.val('{{ date.day.today.end }}');
                        break;
                    case 3:
                        $start_time.val('{{ date.day.lastweek.start }}');
                        $end_time.val('{{ date.day.lastweek.end }}');
                        break;
                    case 4:
                        $start_time.val('{{ date.day.thisweek.start }}');
                        $end_time.val('{{ date.day.thisweek.end }}');
                        break;
                    case 5:
                        $start_time.val('{{ date.day.lastmonth.start }}');
                        $end_time.val('{{ date.day.lastmonth.end }}');
                        break;
                    case 6:
                        $start_time.val('{{ date.day.thismonth.start }}');
                        $end_time.val('{{ date.day.thismonth.end }}');
                        break;
                    case 7:
                        $start_time.val('{{ date.day.thisyear.start }}');
                        $end_time.val('{{ date.day.thisyear.end }}');
                        break;
                    case 8:
                        $start_time.val('{{ date.day.lastyear.start }}');
                        $end_time.val('{{ date.day.lastyear.end }}');
                        break;
                }
            }

        }
    </script>
{% endblock %}